<template>
  <a-tree-select
    :value="nValue"
    show-arrow
    class="event-tree-select"
    dropdown-class-name="event-type-dd"
    :style="`minWidth: ${width}`"
    :tree-data="eventList"
    tree-default-expand-all
    :max-tag-count="1"
    :tree-checkable="mul"
    allow-clear
    block-node
    :placeholder="placeholder"
    @change="changeTreeHandler"
  >
    <template slot="title" slot-scope="{titleShow,subName}">
      {{ titleShow }}
      <span v-if="!((!showCmm&&titleShow==='MMSG')||(!showFdeSub&&titleShow==='FDE'))">
        <span
          v-for="item in subName"
          :key="item"
          class="tree-select-sub"
          :class="[
            (subAc&&((item==='ETOPS'&&isEtops===1)||(item==='Ground'&&isGround===1)))||
              (subMMSG&&((item==='CMM'&&mmsgType===1)||(item==='NCMM'&&mmsgType===2)))
              ?'tree-select-sub-active':'']"
          @click.stop="clickSubHandler(item)"
        >{{ item }}</span>
      </span>

    </template>
    <!-- <a-icon slot="suffixIcon" type="down" /> -->
  </a-tree-select>
</template>

<script>
import { mapState } from 'vuex';
export default {
  model: {
    prop: 'value',
    event: 'changeValueHandler'
  },
  props: {
    mul: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '148px'
    },
    placeholder: {
      type: String,
      default: '事件名称'
    },
    isEtops: {
      type: [Number, undefined],
      default: undefined
    },
    isGround: {
      type: [Number, undefined],
      default: undefined
    },
    showCmm: {
      type: Boolean,
      default: false
    },
    showFdeSub: {
      type: Boolean,
      default: false
    },
    mmsgType: {
      type: [Number, undefined],
      default: undefined
    },
    value: {
      type: [Array, String],
      default: () => []
    }
  },
  data() {
    return {
      event: undefined
    };
  },

  computed: {
    ...mapState('fraMonitoring', [
      'eventList',
      'eventListFlat'
    ]),
    subAc() {
      if (this.value === 'FDE' || this.value.includes('FDE')) {
        return true;
      } else {
        return false;
      }
    },
    subMMSG() {
      if (this.value === 'MMSG' || this.value.includes('MMSG')) {
        return true;
      } else {
        return false;
      }
    },
    nValue() {
      let re = '';
      if (typeof this.value === 'object') {
        re = this.value.map(vi => {
          return this.eventListFlat.find(item => item.titleShow === vi).value;
        });
      } else if (this.value === '') {
        re = undefined;
      } else {
        const v = this.value;
        re = this.eventListFlat.find(item => item.titleShow === v).value;
      }
      return re;
    }
  },

  mounted() {
    if (this.mul && this.value.length > 0) {
      this.event = [...this.value];
    } else {
      this.event = this.value;
    }
  },
  methods: {
    clickSubHandler(item) {
      if (this.subAc) {
        if (item === 'ETOPS') {
          this.$emit('update:isEtops', ((this.isEtops ?? 0) + 1) % 2);
        } else if (item === 'Ground') {
          this.$emit('update:isGround', ((this.isGround ?? 0) + 1) % 2);
        }
      }
      if (this.subMMSG) {
        if (item === 'CMM') {
          if (this.mmsgType === 1) {
            this.$emit('update:mmsgType', 0);
          } else {
            this.$emit('update:mmsgType', 1);
          }
        } else if (item === 'NCMM') {
          if (this.mmsgType === 2) {
            this.$emit('update:mmsgType', 0);
          } else {
            this.$emit('update:mmsgType', 2);
          }
        }
      }
    },
    changeTreeHandler(v) {
      // console.log(v);
      let re = '';
      if (typeof v === 'object') {
        re = v.map(vi => {
          let t = vi.split('|')[0];
          t === 'Sched. Maintenance' ? t = 'SMT' : '';
          return t;
        });
      } else if (typeof v === 'undefined') {
        re = '';
      } else {
        re = v.split('|')[0];
        re === 'Sched. Maintenance' ? re = 'SMT' : '';
      }

      if (re !== 'FDE' || !re.includes('FDE')) {
        this.$emit('update:isEtops', undefined);
        this.$emit('update:isGround', undefined);
      }
      if (re !== 'MMSG' || !re.includes('MMSG')) {
        this.$emit('update:mmsgType', undefined);
      }
      this.$emit('changeValueHandler', re);
    }
  }
};
</script>

<style lang="less">
.event-tree-select {
  .ant-select-arrow {
    transition: 0.2s;
    background-image: url('');
    background-position: center;
    background-size: 44.7%;
    background-repeat: no-repeat;

    transform: rotate(270deg);
    width: 28px;
    height: 32px;
    position: absolute;
    right: 3.8px;
    top: 7px;
    opacity: 0.9;
    svg {
      display: none;
    }
  }
}

.event-tree-select.ant-select-open {
  .ant-select-arrow {
    transform: rotate(450deg);
  }
}
.tree-select-sub{
border: 1px solid #d9d9d9;
padding: 1px 4px;
margin: 0 4px;
}
.tree-select-sub-active{
  border-color:#30329c;
  color: #30329c;
}
</style>
